<template>
  <div class="icon-config-dialog">
    <div v-for="(item, index) in selectValue" :key="item.id" class="icon-preview">
      <img :src="item.url" alt="icon" />
      <div class="shadow">
        <i class="el-icon-delete" @click="handleRowDelete(index)"></i>
      </div>
    </div>
    <el-button type="primary" icon="el-icon-plus" plain @click="visible = true"></el-button>
    <common-dialog
      title="选择图标"
      :visible.sync="visible"
      :confirm="handleConfigConfirm"
      :append-to-body="true"
    >
      <div class="icon-container">
        <div class="ic-header">
          <el-input v-model="keyword" placeholder="请输入图标名称进行搜索" @input="debounceFunc" />
        </div>
        <ul class="ic-list">
          <li
            v-for="item in filterList"
            :key="item.id"
            :class="{ active: selectedIds.includes(item.id) }"
            class="ic-row"
            @click="handleSelect(item)"
          >
            <img :src="item.url" alt="icon" />
            <p class="ft-8 mt-6">{{ item.titleZh }}</p>
            <p class="ft-8">{{ item.subtitleZh }}</p>
            <h1>{{ item.name }}</h1>
          </li>
        </ul>
        <span v-if="!filterList.length" class="empty">暂无数据</span>
      </div>
    </common-dialog>
  </div>
</template>

<script>
import _clonedeep from 'lodash.clonedeep'
import CommonDialog from '@/components/common-dialog'

import { debounce } from '@/utils/'
import * as api from '@/const/api'

export default {
  components: {
    CommonDialog,
  },
  props: {
    value: {
      type: [Array, String],
      default: () => [],
    },
    // 是否单选
    isSingleSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selected: [],
      list: [],
      filterList: [],
      visible: false,
      keyword: '',
      debounceFunc: '',
    }
  },
  computed: {
    selectValue: {
      get() {
        return _clonedeep(this.value)
      },
      set(val) {
        // 触发v-model绑定值更新
        this.$emit('input', val)
      },
    },
    selectedIds() {
      return this.selected.map(({ id }) => id)
    },
  },
  watch: {
    // 监听弹层显示
    visible: {
      handler(val) {
        // 弹层显示，刷新页面
        if (!val) {
          return
        }
        this.selected = [...this.value]
      },
    },
  },
  mounted() {
    // 处理函数需要绑定到this,并且与取消监听函数一致
    this.debounceFunc = debounce(this.onChange, 500)
    this.initIcon()
  },
  methods: {
    // 初始化图标列表
    async initIcon() {
      try {
        this.loading = true

        const { code, msg, data } = await this.$axios.$post(api.productIconList)

        if (+code !== 200) {
          throw new Error(msg || '操作失败')
        }
        this.list = data
        this.filterList = data
      } catch (err) {
        err.message && this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    handleSelect(row) {
      // 判断是新增，还是删除
      let cIndex = ''

      const flag = this.selected.find((item, index) => {
        const isEqual = item.id === row.id
        if (isEqual) {
          cIndex = index
        }
        return item.id === row.id
      })

      if (flag) {
        this.selected.splice(cIndex, 1)
        return
      }

      // 单选逻辑处理
      if (this.isSingleSelect) {
        this.selected = [row]
      } else {
        this.selected.push(row)
      }
    },
    async handleConfigConfirm() {
      if (!this.selected.length) {
        this.$message.error('未勾选数据')
        return false
      }
      this.$emit('input', _clonedeep(this.selected))
    },
    handleRowDelete(index) {
      this.selectValue.splice(index, 1)
      this.$emit('input', _clonedeep(this.selectValue))
    },
    onSelectionChange(val) {
      this.selected = _clonedeep(val)
    },
    onChange(val) {
      if (!val) {
        this.filterList = _clonedeep(this.list)
        return
      }
      this.filterList = this.list.filter(({ name }) => !!name.includes(val))
    },
  },
}
</script>

<style lang="less" scoped>
.icon-config-dialog {
  :deep(.el-dialog) {
    .el-dialog__header {
      margin-bottom: 10px;
      padding: 10px 20px 0;
    }
  }

  .el-button {
    min-width: 40px;
    padding: 15px;
  }

  .icon-preview {
    width: 50px;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    position: relative;
    &:hover {
      .shadow {
        display: block;
      }
    }
    img {
      width: 45px;
      height: 45px;
      filter: drop-shadow(#616266 100px 0); // 在右侧 100px 加一个 #FFF 的阴影
      transform: translateX(-100px);
    }
    .shadow {
      width: 45px;
      height: 45px;
      position: absolute;
      display: none;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.3);
      cursor: pointer;
      text-align: center;
      line-height: 45px;

      i {
        color: #fff;
        font-size: 18px;
      }
    }
  }
}

.icon-container {
  .ic-header {
    margin-bottom: 30px;
    .el-input {
      width: 300px;
    }
  }

  .ic-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;

    .ic-row {
      width: 116px;
      margin: 10px;
      padding: 10px 0;
      text-align: center;
      color: #616266;
      font-size: 16px;
      list-style: none;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0);
      transition: all 0.2s linear;
      border-radius: 4px;
      overflow: hidden;

      &.active {
        background-color: rgba(0, 0, 0, 0.1);
        position: relative;

        &::before {
          content: '';
          display: block;
          height: 16px;
          width: 16px;
          border-radius: 50%;
          position: absolute;
          top: 4px;
          right: 6px;
          background-color: #569ff8;
        }

        &::after {
          content: '';
          display: block;
          height: 5px;
          width: 9px;
          border-left: 1px solid #fff;
          border-bottom: 1px solid #fff;
          position: absolute;
          transform: rotate(-45deg);
          right: 9.5px;
          top: 8px;
        }
      }

      img {
        width: 45px;
        height: 45px;
        filter: drop-shadow(#616266 100px 0); // 在右侧 100px 加一个 #FFF 的阴影
        transform: translateX(-100px);
      }

      .ft-8 {
        margin-top: 2px;
        zoom: 0.5;
        height: 16px;
      }

      .mt-6 {
        margin-top: -6px;
      }

      h1 {
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
        margin-top: 4px;
      }
    }
  }

  .empty {
    font-size: 14px;
    color: #999;
  }
}
</style>
